<!-- brandList 品牌列表 -->
<template>
  <div class="content">
    <el-form :model="query" ref="searchForm" label-width="100px" size="medium" class="search-form">
      <el-form-item label="品牌名称：" prop="keyword">
        <el-input v-model="query.keyword" placeholder="请输入品牌名称" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <el-form-item label-width="0px">
        <Cbutton @click="handleSearch" size="medium">查询</Cbutton>
        <Cbutton type="info" size="medium" @click="handleReset('searchForm')">重置</Cbutton>
      </el-form-item>
    </el-form>

    <div class="content-container">
      <div class="content-btn">
        <Cbutton @click="handleAdd">创建品牌</Cbutton>
      </div>
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column prop="name" label="品牌名称" align="center"></el-table-column>
        <el-table-column prop="logo" label="品牌Logo" align="center">
          <template slot-scope="prop">
            <img :src="prop.row.logo" alt="" style="width: 100px; height: 50px;">
          </template>
        </el-table-column>
        <el-table-column prop="productCommentCount" label="产品评论数量" align="center"></el-table-column>
        <el-table-column prop="productCount" label="产品数量" align="center"></el-table-column>
        <el-table-column prop="showStatus" label="是否显示" align="center">
          <template slot-scope="prop">
            <span class="click-ele" @click="handleEdit(prop.row, 'showStatus', '品牌')">
              {{prop.row.showStatus === 1 ? '是' : '否'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="factoryStatus" label="是否为品牌制造商" align="center">
          <template slot-scope="prop">
            <span class="click-ele" @click="handleEdit(prop.row, 'factoryStatus', '品牌制造商')">
              {{prop.row.factoryStatus === 1 ? '是' : '否'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="prop">
            <span class="click-ele" @click="handleUpdate(prop.row)"> 编辑 </span>
            <span class="click-ele danger" @click="handleRemove(prop.row)"> 删除 </span>
          </template>
        </el-table-column>
      </el-table>

      <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
      </Pagination>
    </div>

    <!-- 创建 修改 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.mVisible" @close="handleCancle" v-if="dialog.mVisible" width="600px"
               :show-close="false">
      <el-form :model="dialog.data" ref="brandForm" size="medium" label-width="140px" :rules="dialog.rules">
        <el-form-item label="品牌名称：" prop="name">
          <el-input v-model="dialog.data.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌Logo：" prop="logo">
          <Upload v-model="dialog.data.logo" :fileLists="dialog.data.logo ? [ dialog.data.logo ] : []" :limit="1"
                  :limitSize="{ width: 230, height: 230 }"></Upload>
          <span style="color:#c0c4cc">商品封面图片尺寸小于230x230像素</span>
        </el-form-item>
        <el-form-item label="品牌大图：" prop="bigPic">
          <Upload v-model="dialog.data.bigPic" :fileLists="dialog.data.bigPic ? [ dialog.data.bigPic ] : []" :limit="1"></Upload>
        </el-form-item>
        <el-form-item label="品牌首字母：" prop="firstLetter">
          <el-input v-model="dialog.data.firstLetter"></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input v-model="dialog.data.sort"></el-input>
        </el-form-item>
        <el-form-item label="是否为厂家制造商：" prop="factoryStatus">
          <el-radio-group v-model="dialog.data.factoryStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否进行显示：" prop="showStatus">
          <el-radio-group v-model="dialog.data.showStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="品牌故事：" prop="brandStory">
          <el-input type="textarea" :rows="3" v-model="dialog.data.brandStory"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCancle">取 消</el-button>
        <el-button type="primary" size="medium" @click="handleSub('brandForm')">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { GetBrandList, EditBrandShowStatus, EditBrandFactoryStatus, RemoveBrand, AddBrand, UpdateBrand } from '@/api/onlineMan'
import { brandFormRules } from '@/utils/rules'
import Upload from '@/components/Upload/edit'
export default {
  name: 'brandList',
  components: { Upload },
  data () {
    return {
      query: {
        keyword: '',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableLoading: false,
      dialog: {
        title: '2',
        mVisible: false,
        type: 'ADD',
        id: '',
        data: {
          name: '',
          logo: '',
          bigPic: '', // 品牌大图
          firstLetter: '', // 品牌首字母
          sort: 0, // 排序
          factoryStatus: 0, // 是否为厂家制造商
          showStatus: 1, // 是否进行显示
          brandStory: '' // 品牌故事
        },
        originData: {
          name: '',
          logo: '',
          bigPic: '', // 品牌大图
          firstLetter: '', // 品牌首字母
          sort: 0, // 排序
          factoryStatus: 0, // 是否为厂家制造商
          showStatus: 1, // 是否进行显示
          brandStory: '' // 品牌故事
        },
        rules: brandFormRules
      }
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      let params = {}
      if (this.query.keyword) params.keyword = this.query.keyword
      params.pageNum = this.query.pageNum
      params.pageSize = this.query.pageSize
      this.tableLoading = true
      GetBrandList(params).then(res => {
        this.tableLoading = false
        const data = res.data
        this.tableList = data.list
        this.totalCount = data.total
      }).catch(e => { this.tableLoading = false })
    },
    handleRemove (row) {
      this.$confirm(`确定删除该品牌吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          ids: [row.id]
        }
        RemoveBrand(params).then(res => {
          this.$message.success(res.message || '删除成功')
          this.getList()
        }).catch(e => { })
      }).catch(e => {

      })
    },
    handleEdit (row, type, tips = '') {
      let tipStr = ''
      let params = {
        ids: [row.id]
      }
      if (type === 'showStatus' && row.showStatus === 1) tipStr = '隐藏' + tips
      if (type === 'showStatus' && row.showStatus === 0) tipStr = '显示' + tips
      if (type === 'factoryStatus' && row.factoryStatus === 1) tipStr = '不设置为' + tips
      if (type === 'factoryStatus' && row.factoryStatus === 0) tipStr = '设为' + tips

      this.$confirm(`确定${tipStr}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 是否为显示品牌
        if (type === 'showStatus') {
          params.status = row.showStatus === 1 ? 0 : 1
          EditBrandShowStatus(params).then(res => {
            this.$message.success(res.message || '操作成功')
            this.getList()
          }).catch(() => { })
        }
        // 是否为品牌制造商
        if (type === 'factoryStatus') {
          params.status = row.factoryStatus === 1 ? 0 : 1
          EditBrandFactoryStatus(params).then(res => {
            this.$message.success(res.message || '操作成功')
            this.getList()
          }).catch(() => { })
        }
      }).catch(() => { })
    },
    handleAdd () {
      this.dialog.type = 'ADD'
      this.dialog.title = '创建品牌'
      this.dialog.mVisible = true
    },
    handleUpdate (row) {
      this.dialog.type = 'UPDATE'
      this.dialog.title = '编辑品牌'
      this.dialog.id = row.id
      for (const key in this.dialog.data) {
        this.dialog.data[key] = row[key]
      }
      this.dialog.mVisible = true
    },
    handleCancle () {
      for (const key in this.dialog.data) {
        this.dialog.data[key] = this.dialog.originData[key]
      }
      this.dialog.id = ''
      this.dialog.mVisible = false
    },
    handleSub (formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return false
        let params = this.dialog.data
        if (this.dialog.type === 'ADD') {
          AddBrand(params).then(res => {
            this.dialog.mVisible = false
            this.getList()
          }).catch(e => { })
        } else {
          params.id = this.dialog.id
          UpdateBrand(params).then(res => {
            this.dialog.mVisible = false
            this.getList()
          }).catch(e => { })
        }
      })
    },
    handleSearch () {
      this.query.pageNum = 1
      this.getList()
    },
    handleReset (formName) {
      this.$refs[formName].resetFields()
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
